<template>
  <el-dialog title="角色分配" :visible="showDialog" @close="closeFn">
    <!-- 多选框
    v-model="checkList" 类型:Array ，数组对应的值就是默认的选中状态
    label 与数组中的元素值相对应，如果存在指定的值则为选中状态，若该标签中无内容，则该属性也充当 checkbox 按钮后的介绍。
     -->
    <el-checkbox-group v-model="checkList">
      <el-checkbox v-for="item in roleList" :key="item.id" :label="item.id">
        {{ item.name }}
      </el-checkbox>
    </el-checkbox-group>
    <span slot="footer">
      <el-row type="flex" justify="center">
        <el-button size="samll" type="primary" @click="addFn">提交</el-button>
        <el-button size="samll" @click="closeFn">取消</el-button>
      </el-row>
    </span>
  </el-dialog>
</template>

<script>
import { getRoleList } from '@/api/setting'
// 获取用户基本详情
import { getEmployeesById } from '@/api/user'
// 保存用户角色
import { assignRoles } from '@/api/employees'

export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // 角色列表
      roleList: [],
      // 选中角色
      checkList: [],
      curId: ''

    }
  },
  /* 渲染角色多选框 */
  async created() {
    // 1.调用获取所有角色
    const res = await getRoleList({ page: 1, size: 500 })
    // 2.添加角色数据
    this.roleList = res.rows
  },
  methods: {

    /* 获取用户详情-->得到角色列表 */
    async getEmployeesById() {
      // 1. 请求接口
      const res = await getEmployeesById(this.curId)
      //  2 .当前用户id赋值给 roleIds 回显
      // 优化：如果后台返回的roleIds 是null非数组 会报错，因此需要短路运算符
      this.checkList = res.roleIds || []
    },

    /* 点击保存用户角色 */
    addFn() {
      // 1.调用接口保存数据
      assignRoles({ id: this.curId, roleIds: this.checkList })
      // 2. 关闭弹窗
      this.closeFn()
    },

    /* 关闭弹窗 */
    closeFn() {
      this.$emit('update:showDialog', false)
    }
  }
}
</script>

<style>

</style>
